デザイナーが集まってボタンについて話し合ってみた
今回、社内メンバーとボタンについて知見を共有しました。
これまでの共有会
情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。
ボタンにはそれぞれ役割がある
プライマリ
プライマリのボタンはユーザーが最もやりたいであろうアクションを選べるようにするボタンです。アプリだとメインの操作を促すボタンはプライマリを使用します。塗りのボタンに加えてフローティングアクションボタン(FAB)も、最も重要なアクションのボタンとして活用することもあります。
ただしプライマリボタンを多用すると、ユーザーが混乱するので使用しすぎないようにしましょう。
セカンダリ
決定ボタンの補助として使用します。注意が必要だが主要なアクションではないボタンです。
テキストのボタン
最も目立たないボタンで、ユーザー体験上あまり重要でない操作を実行するために使用されています。
注意点
やってほしくないことは警告色としてよく利用される赤い文字を割り当てられます。「キャンセル」「破棄」などデータを消すようなアクションを実行するボタンです。仮にそのアクションが最も可能性の高い選択肢であってもプライマリボタンにしないようにしましょう。目立つプライマリボタンに設定すると、読まずに押してしまう可能性があるからです。
ボタンの状態
ボタンには、操作の段階や可否によって状態が変化します。社内のモバイルアプリではEnable（通常 NormalやDefaultとも言われる）、Hover（押下）、Disabled（非活性）３種のボタンを作成することが多いです。
他にもキーボード等の操作で選択した際に適応される状態のFocusやキーボード入力や音声入力でのクリックを表すPressedのボタンを作ることもあります。
非活性のボタン
非活性とはボタンが押せない状態のことです。元は押せるけれどもなんらかの理由で押せない状態になっていることを指します。非活性の状態のボタンにはグレーになっているものと半透明のもの２パターンをよく見かけます。勉強会ではどちらがより非活性な状態を表すのが適しているのかという話になりました。
社内メンバーの見解としては「今はこのボタンを押せない」ということがわかる半透明の表現がグレーよりも適切という結論になりました。
なぜボタンは角丸なのだろう
角丸のボタンは押せそうな感じがするのが良いねという意見がありました。
日常生活では、キーボードやTVのリモコン、自動販売機のボタンなど、丸みを持ったボタンが多いです。私たちは自然と丸みのあるボタン=押せるものという認知を働かせているのかもしれません。
UIの世界でもスティーブ・ジョブズが80年代初頭、iOSのアイコンに角丸の四角を採用し、そのデザインが今でも使われています。角丸の四角は押せるという認識はデジタルの世界でも共通認識のようです。
まとめ
社内勉強会で基本的なボタンについての認識を合わせました。
ボタンはアプリケーション内でユーザーに操作を求める箇所の一つです。これからもユーザーを迷わせることなく適切なボタンの配置を心がけたいです。
参考
HIG Buttons
Material Design 3 All Buttons
Why are Apple’s iPhone icons shaped as rounded squares?
